<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>res_edit.html</title>
</head>
 <body>
	<style type="text/css">
		.res-drag-item{
			list-style-type:none;
			display:block;
			padding:3px;
			border:1px solid #ccc;
			margin:2px;
			width:80%;
			background:#fafafa;
		}
		.res-drag-item span{
			padding-left:20px;
		}
		.indicator{
			position:absolute;
			font-size:9px;
			width:10px;
			height:10px;
			display:none;
			color:red;
		}
	</style>
 <script type="text/javascript">
 	var win = new Windows("res_sort");
 	var indicator = null;
 	var ids = null;
 	$(function(){
 		indicator = $('<div class="indicator"><img src="$!basePath/framework/images/icons/target_right.png"/></div>').appendTo('#sortLayout');
 		//初始化Drap
 		initDrap();
 		initToolbar();
 		initIds();//读取初始排序id顺序
 	});
 	function initDrap(){
 		win.find('.res-drag-item').draggable({
				revert:true,
				proxy:'clone'
			}).droppable({
				onDragOver:function(e,source){
					indicator.css({
						display:'block',
						top:$(this).position().top+$(this).outerHeight()+10
					});
				},
				onDragLeave:function(e,source){
					indicator.hide();
				},
				onDrop:function(e,source){
					$(source).insertBefore(this);
					indicator.hide();
				}
			});
 	}
 	//初始化工具条
 	function initToolbar(){
 		win.find("#btnSave").click(function(){
 			if(!$(this).linkbutton("options").disabled){
 				if(isChanged()){
	 				var pid = win.find("#parentRes").combotree("getValue");
	 				$.post("$!basePath/admin/res/doSort",{parentId:pid,ids:getIds().toString()},function(data){
	 					if(data.isSorted){
	 						top.Notiy.success("排序成功!");
	 						win.parentWindow.reload();//刷新父窗口表格
	 						initIds();
	 					}else{
	 						top.Dialog.error(data.error);
	 					}
	 				},"json");
	 			}else{
	 				top.Notiy.info("您未做任何更改!");
	 			}
 			}
 		});
 	}
 	function initIds(){
 		ids = getIds();
 	}
 	function getIds(){
 		var oIds = new Array();
 		var items = win.find(".res-drag-item");
 		$.each(items,function(n,v){
 			oIds.push(v.id);
 		});
 		return oIds;
 	}
 	function isChanged(){
 		var items = win.find(".res-drag-item");
 		for(var i=0;i<ids.length;i++){
 			if(ids[i] != items[i].id)
 				return true;
 		}
 		return false;
 	}
 	function changeParentRes(newVal,oldVal){
 		var oLoad = win.find("#loading");
 		var childRes = win.find("#childRes");
 		oLoad.show();
 		childRes.hide();
 		$.post("$!basePath/admin/res/childRes",{parentId:newVal},function(data){
 			var childResHtml = "";
 			if(data.length>0){
 				$.each(data,function(n,v){
 				childResHtml += "<li class=\"res-drag-item\" id=\""+v.id+"\"><span class=\""+v.icon+"\">"+v.name+"</span></li>"
 				childRes.html(childResHtml);
 				initDrap();//重新渲染拖曳
 				initIds();
 				win.find("#btnSave").linkbutton("enable");
 			});
 			}else{
 				childRes.html("<li class=\"res-drag-item\">无下级资源</li>");
 				win.find("#btnSave").linkbutton("disable");
 			}
 			oLoad.hide();
 			childRes.fadeIn();
 			
 		},"json");
 	}
	function ok(){
		
  	}
  	function cancel(){
  		win.close();
  	}
 </script>
 <div class="easyui-layout" data-options="fit:true" id="sortLayout">
 	<div data-options="region:'north',border:false">
 		<div class="zframe-datagrid-toolbar" style="padding-bottom:5px;">
	 		<span>上级资源：</span>
	 		<select id="parentRes" class="easyui-combotree" data-options="url:'$!basePath/admin/res/resTree',animate:true,onChange:changeParentRes" style="width:180px;">
	 			<option selected="selected" value="0">无上级资源</option>
	 		</select>
	 		<a id="btnSave" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true">保存更改</a>
 		</div>
 	</div> 
	<div data-options="region:'center',border:false" style="background:#fff;">
		<div id="loading" style="padding-top:3px;padding-left:5px;display:none;"><img src="$!basePath/framework/images/loading.gif"/></div>
	 	<ul id="childRes" style="margin:0;padding:0;margin-left:5px;">
	 		#foreach($res in $childRes)
	 		<li class="res-drag-item" id="$!res.id"><span class="$!res.icon">$!res.name</span></li>
	 		#end
	 	</ul>
	</div>
	<!--Change Button Text-->
	<div data-options="region:'south',border:false" style="text-align:center;padding:5px 0;">
		<!-- <a id="ok" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="ok()">确定</a> -->
		<a id="cancel" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="cancel()">关闭</a>
	</div>
 </div>
</body>
</html>